<template>
    <view class="content">
        <view class="box" v-if="!id && !isEdit">
            <view class="title">选择发货记录</view>
            <view class="send" v-for="(item, index) in option" :key="index" @click="choose(item)">
                <view>
                    <view class="send-i">
                        <view class="send-l">发货日期</view>
                        <view class="u-flex-1">{{item.start_date}}</view>
                    </view>
                    <view class="send-i">
                        <view class="send-l">车牌号</view>
                        <view class="u-flex-1">{{item.number}}</view>
                    </view>
					<view class="send-i" v-if="item.out_trade_no">
					    <view class="send-l">运单号</view>
					    <view class="u-flex-1">{{item.out_trade_no}}</view>
					</view>
                </view>
                <image :src="item.isSelect ? '../../static/icon/choose.png' : '../../static/icon/choose_02.png'" class="choose"></image>
            </view>
			
			<view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="option.length == 0">暂无相关信息</view>
        </view>
        
        <view class="box2" v-if="data.number">
            <view class="item">
                <view class="grey">车牌号</view>
                <view class="item-r">{{data.number}}</view>
            </view>
            <view class="item">
                <view class="grey">发货日期</view>
                <view class="item-r">{{data.start_date}}</view>
            </view>
			<view class="item" v-if="data.out_trade_no">
			    <view class="grey">运单号</view>
			    <view class="item-r">{{data.out_trade_no}}</view>
			</view>
        </view>
        
        <!-- <view class="box2 border-blue">
            <view class="item">
                <view class="grey">选择费用项</view>
                <view class="item-r">
                    <input type="text" placeholder="请选择" class="inp">
                    <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-10"></u-icon>
                </view>
            </view>
        </view> -->
        
        <view v-for="(item, index) in list" :key="index">
            <view class="box2">
				<view class="item">
				    <view class="grey">选择费用项</view>
				    <view class="item-r" @click="open(item)">
						<view>{{item.items || '请选择'}}</view>
				        <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-10" v-if="(!id && !isEdit) || (id && isEdit)"></u-icon>
				    </view>
				</view>
                <view class="item" v-if="item.unit">
                    <view class="grey">单位</view>
                    <view class="item-r">{{item.unit}}</view>
                </view>
				
				<view class="item" v-if="item.status == 1">
				    <view class="grey">里程</view>
				    <view class="item-r">
				        <input type="digit" v-model="item.mileage" placeholder="请输入" class="inp" :disabled="disabled">
				    </view>
				</view>
				
                <view class="item">
                    <view class="grey">数量</view>
                    <view class="item-r">
                        <input type="number" v-model="item.num" placeholder="请输入" class="inp" :disabled="disabled" @blur="blur(item)">
                    </view>
                </view>
                <view class="item">
                    <view class="grey">单价</view>
                    <view class="item-r">
                        <input type="digit" v-model="item.price" placeholder="请输入" class="inp" :disabled="disabled" @blur="blur(item)">
                        <text class="u-p-l-10 text-bold">元</text>
                    </view>
                </view>
                <view class="item">
                    <view class="grey">金额</view>
                    <view class="item-r">
                        <input type="text" v-model="item.cost" placeholder="自动计算" class="inp" disabled>
                        <text class="u-p-l-10 text-bold">元</text>
                    </view>
                </view>
            </view>
            <view class="btns" v-if="(!id && !isEdit) || (id && isEdit)">
                <image src="../../static/icon/add_02.png" class="add-02" @click="add"></image>
                <image src="../../static/icon/del.png" class="del-02" v-if="list.length > 1" @click="del(index)"></image>
            </view>
        </view>
        
        <view class="box">
            <view class="grey">上传单据凭证</view>
			<view class="img">
			    <view class="u-rela" v-for="(item, index) in img" :key="index">
			        <image :src="item" class="up-icon" @click="$previewImage(img, index)"></image>
			        <view class="del-img" v-if="(!id && !isEdit) || (id && isEdit)" @click.stop="$delImage(img, img_id, index)">删除</view>
			    </view>
			    <image src="../../static/image/up.png" class="up-icon" 
					v-if="(img.length < 9 && !id) || (img.length < 9 && isEdit)" @click="chooseImage"></image>
			</view>
        </view>
        
        <view class="box2">
            <view class="item">
                <view class="grey">费用小计</view>
                <view class="item-r text-bold">￥{{money}}</view>
            </view>
        </view>
        
        <view class="btn" v-if="(!id && !isEdit) || (id && isEdit)" @click="$noMultipleClicks(doSubmit)">提交</view>
		
		<template v-if="show">
			<u-select v-model="show" mode="mutil-column-auto" :list="costList" 
				value-name="id" label-name="name" child-name="items" @confirm="confirm"></u-select>
		</template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
				show: false,
				option: [],
				costList: [],
				data: {},
                list: [{items: '',items_id:'',unit: '', num: '',price: '',cost:'', mileage: '',status: 0}],
				item: {},
				money: 0,
				img: [],
				img_id: [],
				id: '',
				disabled: false,
				status: '',
				isEdit: false,//是否能修改
				cost_id: '',
            };
        },
        onLoad(option) {
			if (option.id) {
				uni.setNavigationBarTitle({
					title:'费用单详情'
				})
				this.id = option.id
				this.disabled = true
				this.getData()
			} 
			this.getOption()
			this.getCost()
        },
        methods: {
			getData() {
				this.$ajax('cost_doc_detail', {
					user_token: this.$getSync('userToken'),
					cost_id: this.id,//费用单id
				}).then(ret => {
					if (ret.success == 1000) {
						let data = ret.detail
						this.data.number = data.number
						this.data.start_date = data.start_date
						if (data.out_trade_no) {
							this.data.out_trade_no = data.out_trade_no
						}
						this.money = data.cost
						if (data.images && data.images.length > 0) {
							data.images.forEach(cur => {
								this.img.push(cur.image)
								this.img_id.push(cur.id)
							})
						}
						this.list = data.cost_items
						
						if (data.status == 1 || data.status == 4) {
							this.isEdit = true
							this.disabled = false
							this.cost_id = data.id
						}
						 
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			doSubmit() {
				if (!this.isEdit && !this.data.id) {
					this.$toast('请选择发货记录');
					return
				}
				
				let data = [], isNull = false
				this.list.forEach(cur => {
					if (!cur.items_id || !cur.num || !cur.price || !cur.cost) {
						isNull = true
					}
					if (cur.status == 1 && !cur.mileage) {
						isNull = true
					}
				})
				if (isNull) {
					this.$toast('请将费用项明细填写完整');
					return
				}
				this.list.forEach(cur => {
					data.push({
						items_id: cur.items_id,//费用项id
						num: cur.num,//数量
						price: cur.price,//单价
						cost: cur.cost,//金额
						mileage: cur.mileage,//里程
					})
				})
				
				if (this.img_id.length <= 0) {
					this.$toast('请上传单据凭证');
					return
				}
				
				this.$ajax('insert_cost_doc', {
					user_token: this.$getSync('userToken'),
					id: this.data.id || '',//发货记录id 编辑不用
					image_ids: this.img_id.join(','),//凭证图片id
					data: data,
					cost_id: this.cost_id,//费用单id 编辑
				}).then(ret => {
					if (ret.success == 1000) {
						this.$toast('提交成功');
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			chooseImage() {
			    uni.chooseImage({
			        count: 9, //默认9
			        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			        sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
			        success: (res) => {
			            const tempFilePaths = res.tempFilePaths;
			            for (let i = 0; i < tempFilePaths.length; i++) {
			                this.$upLoadPic(res.tempFilePaths[i]).then(ret => {
			                    console.log(ret)
			                    this.img_id.push(ret.detail.image_id)
			                    this.img.push(ret.detail.image)
			                });
			            }
			        }
			    });
			},
			
			// 计算金额、费用小计
			blur(item) {
				if (item) {
					item.cost = item.num * Number(item.price)
				}
				this.money = 0
				this.list.forEach(cur => {
					this.money = Number(this.money) + Number(cur.cost)
				})
			},
			
            // 添加发货明细
            add() {
                this.list.push({items: '',items_id:'',unit: '', num: '',price: '',cost:'', mileage: '',status: 0})
            },
            
            // 删除发货明细
            del(index) {
                this.list.splice(index, 1)
				this.blur()
            },
			
			open(item) {
				if ((!this.id && !this.isEdit) || (this.id && this.isEdit)) {
					this.item = item
					this.show = true
				}
			},
			confirm(e) {
				console.log(e)
				this.item.items = e[1].label
				this.item.items_id = e[1].value
				this.costList.forEach(cur => {
					if (e[0].value == cur.id) {
						cur.items.forEach(el => {
							if (e[1].value == el.id) {
								this.item.unit = el.unit
								if (el.status == 1) {
									this.item.status = 1
								}
							}
						})
					}
				})
			},
			
			choose(item) {
				this.data = {}
				const nowStatu = item.isSelect;
				this.option.forEach(ii => {
				    ii.isSelect = false;
				})
				item.isSelect =! nowStatu
				if (item.isSelect) {
					this.data = item
				}
			},
			
			// 获取费用项
			getCost() {
				this.$ajax('cost_items', {
					user_token: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.success == 1000) {
						this.costList = ret.detail&&ret.detail.cost_items
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			// 获取发货记录
			getOption() {
				this.$ajax('records_option', {
					user_token: this.$getSync('userToken'),
				}).then(ret => {
					if (ret.success == 1000) {
						this.option = ret.detail.records
						if (this.option && this.option.length > 0) {
							this.option.forEach(cur => {
								this.$set(cur, 'isSelect', false)
							})
						}
					} else {
						this.$toast(ret.msg);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.del-img{
	    position: absolute;
	    right: 12rpx;
	    bottom: 0;
	    color: #FFFFFF;
	    font-size: 22rpx;
	    padding: 7rpx 12rpx;
	    background-color: #000000;
	    opacity: .7;
	    border-radius: 5rpx;
	}
	.img{
	    margin-top: 10rpx;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	    align-items: center;
	}
	.up-icon{
	    width: 187rpx;
	    height: 187rpx;
	    margin-top: 10rpx;
	    margin-right: 10rpx;
	}
    
    page{
        background-color: #eef1f6;
    }
    .content{
        padding: 20rpx;
    }
    .box{
        padding: 35rpx 30rpx;
        margin-bottom: 15rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: bold;
        padding-bottom: 15rpx;
    }
    .send{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 25rpx;
        background-color: #f5f7fa;
        border-radius: 15rpx;
        margin-top: 15rpx;
    }
    .send-i{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        color: #3a4a6e;
    }
    .send-l{
        width: 140rpx;
    }
    .choose{
        width: 31rpx;
        height: 31rpx;
        margin-left: 10rpx;
    }
    
    .box2{
        padding: 0 30rpx;
        margin-bottom: 15rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .border-blue{
        border: 2rpx solid #0075cf;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
    }
    .grey{
        color: #656565;
    }
    .item-r{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .inp{
        flex: 1;
        text-align: right;
		font-size: 28rpx;
    }
    .btns{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 25rpx;
    }
    .add-02{
        width: 152rpx;
        height: 56rpx;
    }
    .del-02{
        width: 57rpx;
        height: 57rpx;
        margin-left: 25rpx;
    }
    
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        margin: 50rpx 0;
        background-color: #00457f;
        border-radius: 50rpx;
    }

</style>
